<template>
	<view>
		<view class="block">
			<view class="content">
				<view class="orderinfo">
					<view class="row">
						<view class="nominal">订单名称:</view><view class="text">  {{order_no}}<!-- {{orderName}} --></view>
					</view>
					<view class="row">
						<view class="nominal">订单金额:</view><view class="text">{{amount}}元</view>
					</view>
				</view>
			</view>
		</view>
		<view class="block">
			<view class="title">
				选择支付方式
			</view>
			<view class="content">
				<view class="pay-list">
					<view class="row" @tap="paytype='alipay'">
							<view class="left">
								<image src="/static/images/a31.png"></image>
							</view>
							<view class="center">
								支付宝支付
							</view>
							<view class="right">
								<radio :checked="paytype=='alipay'" color="#8BDD8E" />
							</view>
					</view>
					
					<view class="row" @tap="paytype='wxpay'">
							<view class="left">
								<image src="/static/images/a30.png"></image>
							</view>
							<view class="center">
								微信支付
							</view>
							<view class="right">
								<radio :checked="paytype=='wxpay'" color="#8BDD8E" />
							</view>
					</view>
					
					<view class="row" @tap="paytype='balance'">
							<view class="left">
								<image src="/static/images/a32.png"></image>
							</view>
							<view class="center">
								余额支付({{yues}})
							</view>
							<view class="right">
								<radio :checked="paytype=='balance'" color="#8BDD8E" />
							</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="btn" @tap="doDeposit">立即支付</view>
			<view class="tis">
				点击立即支付，即代表您同意<view class="terms">
					《条款协议》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				amount:0,
				orderName:'',
				paytype:'alipay',//支付类型
				yues:'',
				oid:'',
				code:'',
				paly:'',
				order_no:''
			};
		},
		onLoad(e) {
			this.oid = e.oid
			this.order_no = e.order_no
			this.amount = parseFloat(e.amount).toFixed(2);
			this.amount = parseFloat(e.amount).toFixed(2);
			// this.amount = e.amount.toFixed(2)
			uni.getStorage({
				key:'paymentOrder',
				success: (e) => {
					if(e.data.length>1){
						this.orderName = '多商品合并支付'
					}else{
						this.orderName = e.data[0].name;
					}
					uni.removeStorage({
						key:'paymentOrder'
					})
				}
			})
			this.yue()
		},
		methods:{
			doDeposit(){
				//模板模拟支付，实际应用请调起微信/支付宝
				switch(this.paytype){
					 case 'balance': this.sum()
					 break;
					 case 'wxpay': this.sumss()
					 break;
					 default: this.sums()
					 break;
				}
			},
			//余额
			yue(){
				this.$ajax(
					this.apiList.yue,
					'PSOT',
				).then(res=>{
					this.yues = res.balance
				})
			},
			sum(){
				this.$ajax(
				this.apiList.payin,
				{
					oid:this.oid,
					way:'yue'
				},
				'POST'
				).then(res=>{
					this.code = res.code
					this.$sToast(res.msg)
					uni.showLoading({
						title:'支付中...'
					});
					setTimeout(()=>{
						uni.hideLoading();
						uni.showToast({
							title:'支付成功'
						});
						setTimeout(()=>{
							uni.redirectTo({
								url:'../../pay/success/success?amount='+this.amount+'&code='+this.code
							});
						},300);
					},700)
				})
			},
			//支付宝
			sums(){
				
				this.$ajax(
				this.apiList.payin,
				{
					oid:this.oid,
					way:'ali'
				},
				'POST'
				).then(res=>{
					this.code = res.code
					this.paly = res.data
					uni.requestPayment({
					      provider: 'alipay',
					      orderInfo: res.data,
					      success: res => {
							this.$sToast(res.msg)
							uni.showLoading({
								title:'支付中...'
							});
							setTimeout(()=>{
								uni.hideLoading();
								uni.showToast({
									title:'支付成功'
								});
								setTimeout(()=>{
									uni.redirectTo({
										url:'../../pay/success/success?amount='+this.amount+'&code='+this.code
									});
								},300);
							},700)
					      },
					      fail: res => {
									this.$sToast('未支付成功')
					      }
					     });
				})
			},
			// sumss(){
			// 	this.$ajax(
			// 	this.apiList.payin,
			// 	{
			// 		oid:this.oid,
			// 		way:'wx'
			// 	},
			// 	'POST'
			// 	).then(res=>{
			// 		this.code = res.code
			// 		this.paly = res.data
			// 		console.log(res.data)
			// 		uni.requestPayment({
			// 			provider: 'wxpay',//微信支付
			// 			orderInfo: {
			// 		     "appid": res.data.appid,
			// 		     "noncestr": res.data.noncestr,
			// 		     "package": "Sign=WXPay",
			// 		     "partnerid": res.data.partnerid,
			// 		     "prepayid": res.data.prepayid,
			// 		     "timestamp": res.data.timestamp,
			// 		     "sign": res.data.sign										
			// 			},
			// 		      success: res => {
			// 				this.$sToast(res.msg)
			// 				uni.showLoading({
			// 					title:'支付中...'
			// 				});
			// 				setTimeout(()=>{
			// 					uni.hideLoading();
			// 					uni.showToast({
			// 						title:'支付成功'
			// 					});
			// 					setTimeout(()=>{
			// 						uni.redirectTo({
			// 							url:'../../pay/success/success?amount='+this.amount+'&code='+this.code
			// 						});
			// 					},300);
			// 				},700)
			// 		      },
			// 		      fail: res => {
			// 				  console.log(res)
			// 						this.$sToast('支付失败')
			// 		      }
			// 		     });
			// 	})
			// }
			//小程序
			sumss(){
			    this.$ajax(
			    this.apiList.payin,
			    {
			     oid:this.oid,
			     way:'wx'
			    },
			    'POST'
			    ).then(res=>{
			     this.code = res.code
			     this.paly = res.data
			     console.log(res.data)
			     uni.requestPayment({
			      provider: 'wxpay',//微信支付
			      // parameter: {
			         "appId": res.data.appId,
			         "nonceStr": res.data.nonceStr,
			         "package": res.data.package,
			         // "partnerid": res.data.partnerid,
			         "prepayId": res.data.prepayid,
			         "timeStamp": res.data.timeStamp,
			      "signType":res.data.signType,
			         "paySign": res.data.paySign,
			      // },
			           success: res => {
			         console.log(res)
			       this.$sToast(res.msg)
			       uni.showLoading({
			        title:'支付中...'
			       });
			       setTimeout(()=>{
			        uni.hideLoading();
			        uni.showToast({
			         title:'支付成功'
			        });
			        setTimeout(()=>{
			         uni.redirectTo({
			          url:'../../pay/success/success?amount='+this.amount+'&code='+this.code
			         });
			        },300);
			       },700)
			           },
			           fail: res => {
			         console.log(res)
			         this.$sToast('支付失败')
			           }
			          });
			    })
			   }
		}
	}
</script>

<style lang="scss">
.block{
		width: 94%;
		padding: 0 3% 40upx 3%;
		.title{
			width: 100%;
			font-size: 34upx;
		}
		.content{
			.orderinfo{
				width: 100%;
				border-bottom: solid 1upx #eee;
				.row{
					width: 100%;
					height: 90upx;
					display: flex;
					align-items: center;
					.nominal{
						flex-shrink: 0;
						font-size: 32upx;
						color: #7d7d7d;
					}
					.text{
						width: 70%;
						margin-left: 10upx;
						overflow: hidden;
						text-overflow:ellipsis;
						white-space: nowrap;
						font-size: 32upx;
					}
				}
			}
			.pay-list{
				width: 100%;
				border-bottom: solid 1upx #eee;
				.row{
					width: 100%;
					height: 120upx;
					display: flex;
					align-items: center;
					.left{
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
						image{
							width: 70upx;
							height: 70upx;
						}
					}
					.center{
						width: 100%;
						font-size: 30upx;
					}
					.right{
						width: 100upx;
						flex-shrink: 0;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}
	.pay{
		margin-top: 20upx;
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		.btn{
			width: 70%;
			height: 80upx;
			border-radius: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			background-color: #13CA62;
			box-shadow: 0upx 5upx 10upx rgba(0,0,0,0.2);
		}
		.tis{
			margin-top: 10upx;
			width: 100%;
			font-size: 24upx;
			display: flex;
			justify-content: center;
			align-items: baseline;
			color: #999;
			.terms{
				color: #5a9ef7;
			}
		}
	}
</style>
